<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Loading - 02</title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		#loading {
			background-color: #db9e36;
			height: 100%;
			width: 100%;
			position: fixed;
			z-index: 1;
			margin-top: 0px;
			top: 0px;
		}

		#loading-center {
			width: 100%;
			height: 100%;
			position: relative;
		}

		#loading-center-absolute {
			position: absolute;
			left: 50%;
			top: 50%;
			height: 150px;
			width: 150px;
			margin-top: -75px;
			margin-left: -75px;
			transform: rotate(45deg);
		}

		.object {
			width: 20px;
			height: 20px;
			background-color: #FFF;
			position: absolute;
			left: 65px;
			top: 65px;
		}

		.object:nth-child(2n+0) {
			margin-right: 0px;
		}

		#object_one {
			animation: object_one 2s infinite;
			animation-delay: 0.2s;
		}

		@keyframes object_one {
			50% {
				transform: translate(-65px, -65px);
			}
		}

		#object_two {
			animation: object_two 2s infinite;
			animation-delay: 0.3s;
		}

		@keyframes object_two {
			50% {
				transform: translate(0, -65px);
			}
		}

		#object_three {
			animation: object_three 2s infinite;
			animation-delay: 0.4s;
		}

		@keyframes object_three {
			50% {
				transform: translate(65px, -65px);
			}
		}

		#object_four {
			animation: object_four 2s infinite;
			animation-delay: 0.5s;
		}

		@keyframes object_four {
			50% {
				transform: translate(65px, 0);
			}
		}

		#object_five {
			animation: object_five 2s infinite;
			animation-delay: 0.6s;
		}

		@keyframes object_five {
			50% {
				transform: translate(65px, 65px);
			}
		}

		#object_six {
			animation: object_six 2s infinite;
			animation-delay: 0.7s;
		}

		@keyframes object_six {
			50% {
				transform: translate(0, 65px);
			}
		}

		#object_seven {
			animation: object_seven 2s infinite;
			animation-delay: 0.8s;
		}

		@keyframes object_seven {
			50% {
				transform: translate(-65px, 65px);
			}
		}

		#object_eight {
			animation: object_eight 2s infinite;
			animation-delay: 0.9s;
		}

		@keyframes object_eight {
			50% {
				transform: translate(-65px, 0);
			}
		}

		#object_big {
			position: absolute;
			width: 50px;
			height: 50px;
			left: 50px;
			top: 50px;
			animation: object_big 2s infinite;
			animation-delay: 0.5s;
		}

		@keyframes object_big {
			50% {
				transform: scale(0.5);
			}
		}
	</style>
	<body>
		<div id="loading">
			<div id="loading-center">
				<div id="loading-center-absolute">
					<div class="object" id="object_one"></div>
					<div class="object" id="object_two"></div>
					<div class="object" id="object_three"></div>
					<div class="object" id="object_four"></div>
					<div class="object" id="object_five"></div>
					<div class="object" id="object_six"></div>
					<div class="object" id="object_seven"></div>
					<div class="object" id="object_eight"></div>
					<div class="object" id="object_big"></div>
				</div>
			</div>

		</div>
	</body>

</html>
